import Link from "next/link"

export default function CertificatesPage() {
  // 模拟数据
  const examResults = [
    { id: 1, title: "合规基础知识考试", score: 85, date: "2023-05-15", status: "已通过" },
    { id: 2, title: "直播法规测试", score: 72, date: "2023-06-20", status: "待补考" }
  ]

  const practiceRecords = [
    { id: 1, type: "自我模拟考试", date: "2023-05-10", correctRate: "78%" },
    { id: 2, type: "刷题练习", date: "2023-05-12", correctRate: "85%" },
    
  ]

  const dailyLearning = [
    { id: 1, title: "合规要点回顾", date: "今天", progress: "已完成" },
    { id: 2, title: "新规学习", date: "昨天", progress: "80%" }
  ]

  return (
    <main className="min-h-screen bg-gray-50">
      <section className="py-8">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* 左侧导航 */}
            <div className="bg-white rounded-lg shadow-sm p-6">
              <h3 className="text-lg font-bold mb-6 border-b pb-2">学员中心</h3>
              <nav className="space-y-4">
               
                <Link href="#exam" className="block p-2 hover:bg-gray-100 rounded transition">
                  <div className="flex items-center">
                    <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                    </svg>
                    <span>考试答题</span>
                  </div>
                </Link>
                <Link href="#practice" className="block p-2 hover:bg-gray-100 rounded transition">
                  <div className="flex items-center">
                    <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                    </svg>
                    <span>练习记录</span>
                  </div>
                </Link>
                {/* <Link href="#statistics" className="block p-2 hover:bg-gray-100 rounded transition">
                  <div className="flex items-center">
                    <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    <span>统计分析</span>
                  </div>
                </Link> */}
                <Link href="#daily-learning" className="block p-2 hover:bg-gray-100 rounded transition">
                  <div className="flex items-center">
                    <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span>每日学习</span>
                  </div>
                </Link>
                <Link href="#certificate-query" className="block p-2 hover:bg-gray-100 rounded transition">
                  <div className="flex items-center">
                    <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <span>证书查询</span>
                  </div>
                </Link>
                <Link href="#certificate-query" className="block p-2 hover:bg-gray-100 rounded transition">
                  <div className="flex items-center">
                    <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <span>证书补发</span>
                  </div>
                </Link>
              </nav>
            </div>

            {/* 主内容区 */}
            <div className="md:col-span-2 space-y-8">
            

              {/* 考试答题 */}
              <div id="exam" className="bg-white rounded-lg shadow-sm p-8">
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-2xl font-bold">考试答题</h2>
                  <Link href="/exams" className="text-blue-600 hover:underline">查看全部考试</Link>
                </div>
                
                <div className="space-y-4">
                  {examResults.map(exam => (
                    <div key={exam.id} className="border rounded-lg p-4 hover:shadow-md transition">
                      <div className="flex justify-between items-center">
                        <h3 className="font-medium">{exam.title}</h3>
                        <span className={`px-2 py-1 rounded text-sm ${
                          exam.status === "已通过" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
                        }`}>
                          {exam.status}
                        </span>
                      </div>
                      <div className="mt-2 flex justify-between text-sm text-gray-600">
                        <span>得分: {exam.score}</span>
                        <span>日期: {exam.date}</span>
                      </div>
                      <div className="mt-3 flex space-x-2">
                        <Link href={`/exams/${exam.id}/review`} className="text-blue-600 text-sm hover:underline">
                          查看试卷
                        </Link>
                        <Link href={`/exams/${exam.id}/analysis`} className="text-blue-600 text-sm hover:underline">
                          答案解析
                        </Link>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* 练习记录 */}
              {/* <div id="practice" className="bg-white rounded-lg shadow-sm p-8">
                <div className="flex justify-between items-center mb-6">
                  <h2 className="text-2xl font-bold">练习记录</h2>
                  <button className="text-blue-600 hover:underline">导出记录</button>
                </div>
                
                <div className="space-y-4">
                  {practiceRecords.map(record => (
                    <div key={record.id} className="border rounded-lg p-4 hover:shadow-md transition">
                      <div className="flex justify-between">
                        <h3 className="font-medium">{record.type}</h3>
                        <span className="text-sm text-gray-600">{record.date}</span>
                      </div>
                      <div className="mt-2 flex justify-between items-center">
                        <span className="text-sm">正确率: {record.correctRate}</span>
                        <Link href={`/practice/${record.id}/review`} className="text-blue-600 text-sm hover:underline">
                          查看详情
                        </Link>
                      </div>
                    </div>
                  ))}
                </div>
              </div> */}

              {/* 每日学习 */}
              {/* <div id="daily-learning" className="bg-white rounded-lg shadow-sm p-8">
                <h2 className="text-2xl font-bold mb-6">每日学习</h2>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {dailyLearning.map(item => (
                    <div key={item.id} className="border rounded-lg p-4 hover:shadow-md transition">
                      <h3 className="font-medium">{item.title}</h3>
                      <div className="mt-2 flex justify-between items-center">
                        <span className="text-sm text-gray-600">{item.date}</span>
                        <div className="flex items-center">
                          <span className="text-sm mr-2">{item.progress}</span>
                          {item.progress === "已完成" ? (
                            <span className="w-3 h-3 bg-green-500 rounded-full"></span>
                          ) : (
                            <div className="w-3 h-3 border-2 border-blue-500 rounded-full"></div>
                          )}
                        </div>
                      </div>
                      <button className="mt-3 w-full py-1 bg-gray-100 hover:bg-gray-200 rounded text-sm transition">
                        开始学习
                      </button>
                    </div>
                  ))}
                </div>
              </div> */}

                {/* 证书查询 */}
                <div id="certificate-query" className="bg-white rounded-lg shadow-sm p-8">
                <h2 className="text-2xl font-bold mb-6">证书查询</h2>
                <form className="space-y-6">
                  <div>
                    <label htmlFor="certificate-number" className="block text-sm font-medium mb-2">
                      证书编号/身份证号
                    </label>
                    <input
                      type="text"
                      id="certificate-number"
                      className="w-full px-4 py-2 border rounded-md"
                      placeholder="请输入身份证号或证书编号"
                    />
                  </div>
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium mb-2">
                      姓名
                    </label>
                    <input
                      type="text"
                      id="name"
                      className="w-full px-4 py-2 border rounded-md"
                      placeholder="请输入姓名"
                    />
                  </div>
                  <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700 transition">
                    查询
                  </button>
                </form>
              </div>

            </div>
          </div>
        </div>
      </section>
    </main>
  )
}